import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import './index.css'

// 公告数据接口
interface Announcement {
  id: number
  title: string
  content: string
  source: string
  time: string
  readCount: string
  isPinned?: boolean
}

function HospitalAnnouncement() {
  const navigate = useNavigate()
  
  // 模拟公告数据
  const [announcements] = useState<Announcement[]>([
    {
      id: 1,
      title: '智慧医院便民平台上线啦,手机也能问诊医生啦',
      content: '智慧医院便民平台已成功上线在线咨询功能,广大群...',
      source: '四川省保健院',
      time: '10天前',
      readCount: '1W+人已读',
      isPinned: true
    },
    {
      id: 2,
      title: '智慧医院即将上线通知',
      content: '智慧医院便民平台将于2天后上线,尽情期待。',
      source: '四川省保健院',
      time: '3个月前',
      readCount: '6W+人已读'
    },
    {
      id: 3,
      title: '智慧医院即将上线通知',
      content: '智慧医院便民平台将于2天后上线,尽情期待。',
      source: '四川省保健院',
      time: '3个月前',
      readCount: '6W+人已读'
    },
    {
      id: 4,
      title: '智慧医院即将上线通知',
      content: '智慧医院便民平台将于2天后上线,尽情期待。',
      source: '四川省保健院',
      time: '3个月前',
      readCount: '6W+人已读'
    },
    {
      id: 5,
      title: '智慧医院即将上线通知',
      content: '智慧医院便民平台将于2天后上线,尽情期待。',
      source: '四川省保健院',
      time: '3个月前',
      readCount: '6W+人已读'
    }
  ])

  return (
    <div className="announcement-container">
      {/* 头部导航 */}
      <div className="announcement-header">
        <button 
          className="back-btn"
          onClick={() => navigate(-1)}
          title="返回"
        >
          ←
        </button>
        <h1 className="header-title">医院公告</h1>
        <div className="header-actions">
          <span className="action-icon">⋯</span>
          <span className="action-icon">◎</span>
        </div>
      </div>

      {/* 占位区域 */}
      <div className="placeholder-area">
        {/* 这里可以放置轮播图或横幅 */}
      </div>

             {/* 公告列表 */}
       <div className="announcement-list">
         {announcements.map((announcement) => (
           <div 
             key={announcement.id} 
             className="announcement-item"
             onClick={() => navigate(`/announcement-detail/${announcement.id}`)}
             style={{ cursor: 'pointer' }}
           >
             <div className="announcement-header-row">
               {announcement.isPinned && (
                 <span className="pinned-tag">置顶</span>
               )}
               <h3 className="announcement-title">{announcement.title}</h3>
             </div>
             <p className="announcement-content">{announcement.content}</p>
             <div className="announcement-meta">
               <span className="announcement-source">{announcement.source}</span>
               <span className="announcement-time">{announcement.time}</span>
               <span className="announcement-reads">{announcement.readCount}</span>
             </div>
           </div>
         ))}
       </div>

      {/* 底部加载提示 */}
      <div className="load-more">
        上拉加载更多
      </div>
    </div>
  )
}

export default HospitalAnnouncement
